<template>
	<view class="museum-item">
		<view @click="visible = true">
			<view>
				<icon-layers :style="{ color: '#165DFF',marginRight: '12px',fontSize: '18px' }" />
				<text class="arco-modal-title" style="font-weight: bold;">{{ info.player }}</text>
			</view>
			<view class="desc-box">
				<a-carousel
				    :style="{
				      width: '100%',
				      height: '180px',
				    }"
					:autoPlay="true"
					indicator-type="line"
				  >
				    <a-carousel-item v-for="image in info.imageList">
				      <image :src="image" style="width: 100%;height: 100%;" mode="aspectFit"></image>
				    </a-carousel-item>
				  </a-carousel>
			</view>
			<view style="text-align: center;" class="work-desc">
				{{ info.title || '暂无描述' }}
			</view>
		</view>

		<view class="bottom-btn">
			<view style="font-size: 14px;color: #ffb65d;" @click="visible = true">
				<icon-arrow-rise size="18" /><text style="margin-left: 6px;">点击上方查看作品设计理念</text>
				<!-- <text style="margin-right: 4px;font-weight: bold;font-size: 16px;">{{ info.voteNum }}</text> -->
			</view>

			<block v-if="!info.vote">
				<a-button type="primary" @click="Vote">
					<template #icon>
						<icon-thumb-up-fill />
					</template>
					给TA投票</a-button>
			</block>
			<block v-else>
				<a-button type="dashed" disabled>
					<template #icon>
						<icon-thumb-up-fill />
					</template>
					已投票</a-button>
			</block>

		</view>
	</view>

	<a-modal :footer="false" v-model:visible="visible" width="92%" hide-cancel>
		<template #title>
			{{ info.player }}
		</template>
		<view class="desc">{{ info.title || '暂无描述' }}</view>
		<div class="model-content">
			<view class="node">{{ info.desc }}</view>
			<a-image-preview-group infinite>
				<block v-for="(img,index) in info.imageList" :Key="index">
					<a-image :src="img" style="margin-bottom: 4px;" width="100%" fit="cover" />
				</block>
			</a-image-preview-group>
		</div>
	</a-modal>

</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import VoteApi from '@/VoteApi'
	import {
		Message,
		Modal
	} from '@arco-design/web-vue';

	const visible = ref(false)
	const UUID = uni.getStorageSync('UUID')

	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		}
	})

	const infoDetail = () => {
		uni.navigateTo({
			url: '/pages/Info?id=' + props.info.id
		})
	}

	// 投票
	const Vote = () => {
		VoteApi.Add({
			uuid: UUID,
			voteId: props.info.id
		}).then(resp => {
			if (resp.code !== 200) {
				Message.error(resp.msg);
				return
			}
			Message.success("已成功投票")
			setTimeout(() => {
				window.location.reload()
			}, 800)
			
		})
	}
</script>

<style scoped lang="scss">
	.museum-item {
		background-color: #fff;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.bottom-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12px;
	}

	.work-desc {
		color: rgb(var(--arcoblue-6));
		background-color: rgb(var(--arcoblue-1));
		border: 1px solid transparent;
		font-size: 12px;
		line-height: 22px;
		padding: 4px 8px;
	}

	.desc-box {
		background-color: #F3F5F7;
		// padding: 20rpx 40rpx;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.desc {
		text-align: center;
		font-size: 14px;
		color: #444;
		font-weight: 400;
		line-height: 1.5;
		margin-bottom: 24px;
		padding: 8px 12px;
		color: rgb(var(--arcoblue-6));
		background-color: rgb(var(--arcoblue-1));
		border: 1px solid transparent;
	}

	.node {
		text-align: center;
		font-size: 12px;
		color: #999;
		font-weight: 400;
		line-height: 2;
		padding: 8px 16px;
		margin-bottom: 8px;
	}

	.model-content {
		max-height: 400px;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>